<template>
  <div class="box">
    <picker></picker>
    <h1>二手房</h1>
    <div class="erstwhile">
      <div class="erstwhileItem" v-for="item in list" :key="item.id">
        <div class="erstwhileItemL">
          <img :src="item.img" alt="" />
          <div v-if="item.info_level == 2" class="jx">
            <img src="../../static/img/精选.png" alt="" />
          </div>
        </div>
        <div class="erstwhileItemR">
          <div class="erstwhileItemRTitle">{{ item.title }}</div>
          <div class="erstwhileItemRBuju">
            <div>
              <span>{{ item.shi }}室{{ item.ting }}厅{{ item.wei }}卫</span>
              | <span>{{ item.mianji }}/m </span>
            </div>
            <div>{{ item.community_name }}</div>
          </div>
          <div class="erstwhileItemRLabel">
            <span
              v-for="(item1, index1) in item.label"
              :key="index1"
              :style="{
                color: ` ${item1.color}`,
                border: `1px solid ${item1.color}`,
              }"
              >{{ item1.name }}</span
            >
          </div>
          <div class="erstwhileItemRFangjia">
            <div>
              <span :style="{ color: 'red' }">{{ item.fangjia }}</span
              >万 <span>{{ item.danjia }}</span
              >元/m
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import list from "../../static/json/ershou.json";
export default {
  data() {
    return {
      list: list.list,
    };
  },
  mounted() {
    console.log(list);
  },
  modules: {},
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  padding: 0 5%;
  h1 {
    font-weight: 600;
    font-size: 50rpx;
  }
  .erstwhile {
    width: 100%;
    display: flex;
    flex-direction: column;
    > .erstwhileItem {
      width: 100%;
      padding: 20rpx 0;
      display: flex;
      border-bottom: 1px solid #999;
      //左侧图片
      .erstwhileItemL {
        width: 200rpx;
        display: flex;
        align-items: center;
        margin-right: 10rpx;
        position: relative;
        > img {
          width: 200rpx;
          height: 180rpx;
          border-radius: 20rpx;
        }
        > .jx {
          position: absolute;
          left: -1rpx;
          top: 35rpx;
          img {
            width: 50rpx;
            height: 50rpx;
          }
        }
      }
      // 右侧盒子
      > .erstwhileItemR {
        flex: 1;
        display: flex;
        flex-direction: column;
        
        > div {
          padding: 5rpx  60rpx 0 5rpx;
        }
        .erstwhileItemRTitle {
          font-size: 30rpx;
        }
        .erstwhileItemRBuju {
          font-size: 24rpx;
          span {
            margin-right: 20rpx;
          }
          span:nth-child(2) {
            margin-left: 20rpx;
          }
        }
        .erstwhileItemRLabel {
          span {
            font-size: 24rpx;
            margin-right: 20rpx;
          }
        }
        .erstwhileItemRFangjia {
          display: flex;
          justify-content: space-between;
          > div {
            font-size: 30rpx;
            > span {
              font-size: 30rpx;
            }
          }
        }
      }
    }
  }
}
</style>